import { Alert, Tabs, TabItem } from '@aws-amplify/ui-react';
import { AppDirectoryAlert } from '@/components/AppDirectoryAlert';

import { InstallScripts } from '@/components/InstallScripts';
import { DeveloperPreview } from './DeveloperPreview';
import { Fragment } from '@/components/Fragment';

<DeveloperPreview />

Account Settings components are a set of standalone components that add [user management](https://docs.amplify.aws/lib/auth/manageusers/q/platform/js/) flows to your application with minimal boilerplate.

<Alert variation="warning" role="none">
  Account Settings components require end user to be authenticated. You can use the [`Authenticator`](/connected-components/authenticator) component to add authentication UI to your application.
</Alert>

## Quick Start

<Fragment platforms={['react']}>
  {({ platform }) => import('@/components/AppDirectoryAlert')}
</Fragment>


### Step 1. Configure Backend

Account settings components work seamlessly with the [Amplify CLI](https://docs.amplify.aws/cli/start/install/)
to **automatically** work with your backend.

First, update `@aws-amplify/cli` with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
if you're using a version before `6.4.0`:

<Tabs>
<TabItem title="npm">

```shell
npm install -g @aws-amplify/cli@latest
```

</TabItem>
<TabItem title="yarn">

```shell
yarn global add @aws-amplify/cli@latest
```

</TabItem>
</Tabs>

### Step 2. Install Dependencies

<InstallScripts />